<template>
  <div style="display: flex; flex-direction: column; align-items: center; padding-top: 20px;">
    <!-- el-row 和按钮组 -->
    <el-row style="justify-content: center;align-items: center; width: 100%;margin-bottom: 20px;">
      <el-select @change="search" style="margin-left:20px; width: 140px;" v-model="selectedStatus" placeholder="订单状态">
        <el-option
            v-for="status in statusList"
            :key="status.id"
            :label="status.name"
            :value="status.id">
        </el-option>
      </el-select>

      <el-button @click="reset" style="margin-left: 20px;">
        重置
      </el-button>
    </el-row>

    <el-table :data="showRecords" table-layout="fixed" stripe style="width: 80%;margin-top: 10px;">
      <el-table-column align="center" prop="date" label="就诊时间" :formatter="formatDate"/>
      <el-table-column align="center" prop="departmentId" label="科室" :formatter="formatDepart"/>
      <el-table-column align="center" prop="clinicId" label="门诊" :formatter="formatClinic"/>
      <el-table-column align="center" prop="examItemId" label="检查项目" :formatter="formatExamItem"/>
      <el-table-column align="center" prop="checkDoctorId" label="医生" :formatter="formatDoctor"/>
      <el-table-column align="center" prop="fee" label="费用" />
      <el-table-column align="center" prop="status" label="订单状态" :formatter="formatStatus"/>
      <el-table-column align="center" label="操作" >
        <template #default="scoped">
          <el-button link type="primary" @click="details(scoped.row)">
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>


<script setup>
import {useRouter} from "vue-router";
import {ref} from "vue";
import examRecordApi from "@/apis/examRecord";
import departClinicDoctorItemApi from "@/apis/departClinicDoctorItem";


const router = useRouter();

const patientInfo = JSON.parse(sessionStorage.getItem('userInfo'))

const selectedStatus = ref(null)
const statusList = [
  {id:0,name:'待支付'},
  {id:1,name:'待就诊'},
  {id:2,name:'已就诊'},
  {id:3,name:'已取消/已作废'},
]

/**
 * 重置
 */
const reset = () =>{
  // getRecordList();
  showRecords.value = recordList.value;
  selectedStatus.value = null;
}

const recordList = ref([])
const showRecords = ref([])
const getRecordList = async () =>{
  const data = {
    patientId:patientInfo.id
  }
  recordList.value = (await examRecordApi.getAllListByPatientId(data)).data;
  showRecords.value = recordList.value;
  // selectedStatus.value = null;
}
getRecordList();



/**
 * 根据订单状态获取记录
 */
const search = () =>{
  console.log(selectedStatus.value)
  showRecords.value = recordList.value.filter(record => record.status === selectedStatus.value)
}

/**
 * 获取科室信息、门诊、医生信息
 * @type {Ref<UnwrapRef<*[]>, UnwrapRef<*[]> | *[]>}
 */
const departmentList = ref([])
const clinicList = ref([]);
const doctorList = ref([])
const examItemList = ref([])

const getDepartList = async () => {
  const res = await departClinicDoctorItemApi.getDepartList()
  // console.log(res)
  if(res.code === 200){
    departmentList.value = res.data;
  }else {
    departmentList.value = null;
  }
}
getDepartList();

const getClinicList = async () =>{
  const res = await departClinicDoctorItemApi.getClinicList()
  // console.log(res)
  if(res.code === 200){
    clinicList.value = res.data;
  }else {
    clinicList.value = null;
  }
}
getClinicList();

const getDoctorList = async () =>{
  const res = await departClinicDoctorItemApi.getDoctorList();
  // console.log(res)
  if(res.code === 200){
    doctorList.value = res.data;
  }else {
    doctorList.value = null;
  }
}
getDoctorList();

const getExamItemList = async () =>{
  const res = await departClinicDoctorItemApi.getExamItemList()
  if(res.code === 200){
    examItemList.value = res.data;
  }else {
    examItemList.value = null;
  }
}
getExamItemList();

/**
 * table数据格式
 * @param row
 * @returns {*}
 */
function formatDepart(row) {
  const department = departmentList.value.find(item => item.id === row.departmentId);
  // console.log(department);
  return department ? department.name : '未知科室';
}

function formatClinic(row) {
  const clinic = clinicList.value.find(item => item.id === row.clinicId);
  // console.log(clinic);
  return clinic ? clinic.name : '未知门诊';
}

function formatDoctor(row) {
  const doctor = doctorList.value.find(item => item.id === row.checkDoctorId);
  // console.log(doctor);
  return doctor ? doctor.name : '未知医生';
}
function formatExamItem(row) {
  const examItem = examItemList.value.find(item => item.id === row.examItemId);
  // console.log(examItem);
  return examItem ? examItem.name : '未知检查项目';
}

// function formatDoctorTitle(row) {
//   const doctor = doctorList.value.find(item => item.id === row.doctorId);
//   // console.log(doctor);
//   if(doctor.title === 0){
//     return "医师"
//   }
//   if(doctor.title === 1){
//     return "主治医师"
//   }
//   if(doctor.title === 2){
//     return "副主任医师"
//   }
//   if(doctor.title === 3){
//     return "主任医师"
//   }
// }

function formatStatus(row) {
  const status = statusList.find(item => item.id === row.status);
  // console.log(status);
  return status ? status.name : '未知状态';
}

function formatDate(row) {
  if (row.date === null){
    return '未知时间';
  }
  const date = new Date(row.date);
  const year = date.getFullYear(); // 获取年份
  const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 获取月份，月份从0开始，所以加1
  const day = date.getDate().toString().padStart(2, '0'); // 获取日
  return `${year}-${month}-${day}`;
}




/**
 * 查看订单详情信息
 */
const details = (row) =>{
  console.log(row)
  const details = {
    id:row.id,
    date:row.date,
    timeSlot:row.timeSlot,
    departmentName:formatDepart(row),
    clinicName:formatClinic(row),
    examItemName:formatExamItem(row),
    checkDoctorName:formatDoctor(row),
    // doctorTitle:formatDoctorTitle(row),
    fee:row.fee,
    payTime:row.payTime,
    orderId:row.orderId,
    status:row.status
  }
  sessionStorage.setItem('exam_details',JSON.stringify(details));
  router.push({name:'ExamDetails'})

}
</script>


<style scoped>

</style>
